<!--  -->
<template>
  <div class="container">
    <div class="atricle-name" style="margin-top:0px">
      <div style="width:80px;font-size: 15px;">文章名：</div>
      <el-input
        style="width:300px"
        :disabled="true"
        v-model="article.articlename"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div class="atricle-name">
      <div style="width:80px;font-size: 15px;">文章状态：</div>
      <el-tag v-if="article.auditstatus == 0" size="medium" type="warning">待审核</el-tag>
      <el-tag v-if="article.auditstatus == 1" size="medium" type="danger">审核不通过</el-tag>
      <el-tag v-if="article.auditstatus == 2" size="medium" type="success">审核通过</el-tag>
    </div>
    <div class="atricle-name">
      <div style="width:100px;font-size: 15px;">文章内容：</div>
      <el-input
        :disabled="true"
        autosize
        v-model="article.content"
        type="textarea"
        style="width:600px;"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div class="atricle-name">
      <div style="width:80px;font-size: 15px;">发布者：</div>
      <el-tag size="medium" type="warning">{{article.userName}}</el-tag>
    </div>
    <div class="demo-image__preview">
      <el-image
        v-for="item in article.uploadFileList"
        v-bind:key="item.id"
        style="width: 100px; height: 100px"
        :src="item.address"
      ></el-image>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      id: "",
      article: ""
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.getArticleInfo();
  },
  methods: {
    getArticleInfo() {
      let id = this.$route.query.id;
      this.id = id;
      this.getRequest("/life/articles-base/getArticle", { id }).then(res => {
        this.article = res.data;
      });
    }
  },
  watch: {}
};
</script>

<style lang='css' scoped>
.atricle-name {
  display: flex;
  align-items: center;
  margin: 40px;
}
.atricle-name > div {
  text-align: left;
}
.demo-image__preview {
  display: flex;
  flex-direction: row;
}
.el-image {
  margin: 20px;
}
</style>